<div @drop.prevent="onDrop" @dragover.prevent="onDragover" @dragenter.prevent>
    <p class="basicInfo" style="position: relative;">
        文件管理
    </p>
    <el-row style="margin-top: 10px;">
        <div class="width100 d-flex a-center">
            <el-form-item label="web端同步路径:" label-width="125px" class="width35">
                <el-input type="text" v-model="webSyncPath" placeholder="请设置web端同步路径"
                          class="width100">
                </el-input>
            </el-form-item>
            <el-form-item label="手机端同步路径:" label-width="125px" class="width35">
                <el-input type="text" v-model="phoneSyncPath" placeholder="请设置手机端同步路径(以/sdcard为根路径)"
                          class="width100">
                </el-input>
            </el-form-item>
            <div class="width30 d-flex a-center" style="justify-content: right;margin-bottom:10px;">
                <div style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:0px;margin-right: 10px;">
                    <span>
                        自动同步web同步路径：
                    </span>
                    <el-switch v-model="autoSyncWebSyncPath"/>
                </div>
                <el-button @click.stop="syncFileToPhone">
                    同步到手机端
                </el-button>
                <el-button @click.stop="syncFileToWeb">
                    同步到web端
                </el-button>
            </div>
        </div>
    </el-row>
    <el-row style="margin-top: 10px;">
        <div class="d-flex j-sb a-center width100">
            <div class="d-flex a-center">
                <el-button size="mini" type="primary" @click="uploadFileClick">上传文件</el-button>
                <el-button size="mini" style="margin-left: 5px;"  type="primary" @click="createFolder">新建文件夹</el-button>
            </div>
            <input ref="input" style="display: none;" type="file" name="file" :multiple="true" :accept="accept" @change="handleChange">
         </div>
    </el-row>
    <el-row>
        <div class="d-flex j-sb a-center breadcrumbWrap" style="margin-top: 10px;margin-bottom: 10px;">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item v-for="(item, i) in breadcrumbList" :key="i" class="pointer textHover" :class="{'endBreadcrumb': i !== 0 && i === breadcrumbList.length - 1, 'hoverBreadcrumb': breadcrumbList.length > 1 && i !== breadcrumbList.length - 1 }">
                    <span @click="breadcrumbChange(item, i)">{{ item.label }}</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
            <span class="primary-text-color font-14 keep-all">共{{ fileList.length }}个</span>
        </div>
    </el-row>
   <el-row>
        <div class="d-flex a-center fileOperate primary-text-color pl-1">
            <el-tooltip class="item" v-if="copyFileList.length>0" effect="dark" :disabled="!copyFileNames" :content="copyFileNames" placement="top-start">
                <span class="fileTips" >复制{{ copyFileList.length }}个文件(夹)</span>
            </el-tooltip>
            <el-tooltip class="item" v-else-if="moveFileList.length>0" effect="dark" :disabled="!allowMoveFileNames" :content="allowMoveFileNames" placement="top-start">
                <span class="fileTips" >移动{{ allowMoveFileList.length }}个文件(夹)</span>
            </el-tooltip>
            <el-tooltip class="item" v-else="checkFileCount>0" effect="dark" :disabled="!checkFileNames" :content="checkFileNames" placement="top-start">
                <span class="fileTips" >已选{{ checkFileCount }}个文件(夹)</span>
            </el-tooltip>
            <div class="operate d-flex a-center j-center">
                <el-link v-if="checkFileCount>0" :underline="false" type="info" style="margin-left: 5px;" @click="operateFun('copy')">复制</el-link>
                <el-link v-if="checkFileCount>0" :underline="false" type="info" style="margin-left: 5px;" @click="operateFun('move')">移动</el-link>
                <el-link v-if="checkFileCount>0" :underline="false" type="info" style="margin-left: 5px;" @click="operateFun('remove')">删除</el-link>
                <el-link v-if="copyFileList.length>0" :underline="false" type="info" style="margin-left: 5px;" @click="operateFun('paste')">粘贴到</el-link>
                <el-link v-if="moveFileList.length>0" :underline="false" :disabled="!allowMoveFileList.length>0" type="info" style="margin-left: 5px;" @click="operateFun('moveTo')">移动到</el-link>
                <el-link v-if="checkFileCount>0" :underline="false" type="info" style="margin-left: 5px;" @click="operateFun('syncToPhone')">同步到手机</el-link>
                <el-link v-if="copyFileList.length>0 || moveFileList.length>0" :underline="false" type="info" style="margin-left: 5px;" @click="operateFun('cancel')">取消</el-link>
            </div>
        </div>
    </el-row>
    <el-row>
        <div class="fileTableList" v-loading="fileLoading">
            <div class="fileList-head d-flex a-center">
                <div class="d-flex a-center fileName">
                    <el-checkbox v-model="checkAllFile" @change="checkAllFileChange" />
                    <span style="margin-left: 8px">文件名</span>
                </div>
                <div class="fileSize">文件大小</div>
                <div class="lastUpdateTime">最后更新时间</div>
                <div class="operate">操作</div>
            </div>
            <el-scrollbar class="right-scrollbar-wrap">
                <div v-for="(item, index) in uploadFileList" :key="'upload'+index" class="fileList-head fileList-body d-flex a-center uploadFileHover">
                    <div class="d-flex a-center fileName">
                        <el-checkbox v-model="item.check" disabled />
                        <div class="fileNameWrap d-flex a-center flex-1">
                            <span class="mr-16 text-fileName mt-0">{{ item.fileName }}</span>
                        </div>
                    </div>
                    <span class="iconfont" @click.stop.native="cancelUpload(index)">取消</span>
                    <el-progress :percentage="item.percentage" :stroke-width="3" />
                </div>
                <div v-for="(item,index) in fileList" :key="index" class="fileList-head fileList-body d-flex a-center">
                    <div class="d-flex a-center fileName">
                        <el-checkbox v-model="item.check" class="mr-5" @dblclick.stop.native />
                        <div class="fileNameWrap pointer d-flex a-center flex-1 mr-10" @dblclick="fileNameDbClick(item)" @click="fileClick(item)">
                            <span class="mr-10 white-noWrap ellipsis-1 text-fileName mt-0" :title="item.fileName">{{ item.fileName }}<span v-show="!item.isDirectory">.{{ item.fileType }}</span></span>
                        </div>
                    </div>
                    <div class="d-flex a-center fileSize">
                        <span>{{ calculateSize(item.fileSize) }}</span>
                    </div>
                    <div class="d-flex a-center lastUpdateTime">
                        <span>{{ item.lastUpdateTime }}</span>
                    </div>
                    <div class="operate d-flex a-center j-center">
                        <el-link v-show="!item.isDirectory" :underline="false" type="info" @click="previewFile(item.previewUrl)">预览</el-link>
                        <el-link :underline="false" type="info" style="margin-left: 5px;" @click="reName(item)">重命名</el-link>
                        <el-link v-show="!item.isDirectory" :underline="false" type="info" style="margin-left: 5px;" @click="syncToPhoneSingle(item)">同步到手机</el-link>
                        <el-link :underline="false" type="info" style="margin-left: 5px;" @click="removeFile(item)">删除</el-link>
                    </div>
                </div>
            </el-scrollbar>
        </div>
    </el-row>
</div>